<template>
    <div class="container">
        <thead class="my-table-header">
            <tr>
                <slot></slot>
            </tr>
        </thead>
        <div class="my-table-body">
            <table>
                <tbody>
                    <tr v-for="(item, index) in data" :key="index">
                        <td v-for="(ite, ind) in default_slot" :key="ind">
                            <span>{{ find_item_data(item, ite.props.prop) }}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted, defineSlots, computed } from "vue"
interface Props {
    data: Array<Object>
}
interface Slots {
    default: Function
}
const props = defineProps<Props>()
let slot = defineSlots<Slots>()
let default_slot = ref(slot.default())
onMounted(() => {

})
const find_item_data = computed(() => (item: any, prop: string) => {
    return item[prop] || "——"
})
</script>

<style lang="scss" scoped>
.container {
    border: 1px solid;
}

.my-table-body {
    border: 1px solid;
    height: 100px;
    overflow: hidden;
}
</style>